<template>
	<view>
		<view class="line">
			
		</view>
		<view class="forgot">
			<view class="forgot_name">
				输入手机号
			</view>
			<u-input
			    placeholder="请输入手机号"
			    border="surround"
			    v-model="mobile"
				@change="change"
				fontSize='14'
				class="textinput"
				
			  ></u-input>
		</view>
		<view class="forgot">
			<view class="forgot_name">
				输入支付密码
			</view>
			<u-input
			    placeholder="请输入支付密码"
			    border="surround"
			    v-model="paypwd"
				@change="change"
				fontSize='14'
				type='password'
				class="textinput"
			  ></u-input>
		</view>
		<view class="forgot">
			<view class="forgot_name">
				输入验证码
			</view>
			<u-input
			    placeholder="输入验证码"
			    border="surround"
			    v-model="code"
				@change="change"
				fontSize='14'
				type='code'
				class="textinput"
			  >
			  <template slot="suffix">
					<u-code
						ref="uCode"
						@change="codeChange"
						seconds="20"
						changeText="X秒重新获取"
						style="color: aliceblue;"
					></u-code>
					<u-button
						@tap="getCode"
						:text="tips"
						type="success"
						class="textbut"
					></u-button>
				</template>
			  </u-input>
		</view>
		<view class="btnsub " :class="isbtn?'btnissub':''" @click="isbtn?confirm():''">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: '',
				paypwd: '',
				tips: '获取验证码',
				mobile:'',
				isbtn:false
			}
		},
		onShow() {
			this.getUser()
		},
		methods: {
			change(){
				const {mobile,paypwd,code}=this
				if(mobile!==''&&paypwd!==''&&code!==''){
					this.isbtn=true
				}else{
					this.isbtn=false
				}
			},
			async getUser(){
				const res = await this.$fun.ajax.post('user/index', {}) 
				this.mobile = res.data.mobile
			},
			codeChange(text) {
				this.tips = text;
			},
			async getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					const res = await this.$fun.ajax.post('sms/send', {mobile:this.mobile,event:'resetpwd'})
					uni.hideLoading();
					if(res.code==1){
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast(res.msg);
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}
					
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			async confirm() {
				let {
					mobile,
					code,
					paypwd
				} = this;
				let parms = {
					mobile,
					code,
					paypwd
				}
				if (paypwd == '') {
					this.$fun.msg('请输入支付密码')
					return
				}
				// if (code == '') {
				// 	this.$fun.msg('请输入验证码')
				// 	return
				// }// user/editPay
				await this.$fun.ajax.post('user/editPay', {
					...parms
				}).then(res => {
					if (res.code == 1) {
						this.$fun.msg(res.msg)
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
page{
	background-color: #fff;
}
.forgot{
	padding-top: 40rpx;
	margin: 0rpx 30rpx;
	.forgot_name{
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		line-height: 45rpx;
		text-align: left;
		font-style: normal;
		margin-bottom: 20rpx;
	}
	.textinput{
		height: 88rpx;
		line-height: 88rpx;
		box-sizing: border-box;
		background: #F6F6F6;
		border-radius: 24rpx;
		border: none;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #CCCCCC;
		text-align: left;
		font-style: normal;
	}
	.textbut{
		border: none;
		background-color: #F6F6F6;
		font-weight: 400;
		font-size: 28rpx;
		color: #5D78FF;
	}
	.rebut .u-button .u-button__text{
		// color: #999999;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx !important;
		color: #5D78FF;
		text-align: left;
		font-style: normal;
	}
}
.btnsub{
	width: 560rpx;
	height: 100rpx;
	line-height: 100rpx;
	border-radius: 50rpx;
	background: #EAEAEA;
	color: #fff;
	margin: 80rpx auto;
	text-align: center;
}
.btnissub{
	background: #5D78FF;
}
</style>
